<template>
   <div class="mainbody">
       <div class="mainTop">
           <van-sticky @scroll="scrollhead">
       <div class="fixHeader" v-show="is">{{filmData.name}}
           <img @click="$router.push('/movie')" style="width: 0.6rem;height:0.6rem; position: absolute;top:0.05rem;left:0.05rem;" src="@/assets/imgs/back.png" alt="">
       </div>
       </van-sticky>
       <div class="poster">
        <img v-if="filmData" :src="filmData.poster" alt="">
        <div class="logo"><img @click="$router.push('/movie')" style="width: 0.6rem;height:0.6rem; position: absolute;top:0.05rem;left:0.05rem;" src="@/assets/imgs/back.png" alt=""></div>
       </div>
       <div class="detail">
       <p class="line1"><span class="left">{{filmData.name}}</span><span class="center">{{filmData.item.name}}</span><span class="right">{{filmData.grade}}分</span></p>
       <p class="line2">{{filmData.category}}</p>
       <p class="line2">{{new Date(filmData.premiereAt*1000).getFullYear()}}-{{new Date(filmData.premiereAt*1000).getMonth()+1}}-{{new Date(filmData.premiereAt*1000).getDate()}}上映</p>
       <p class="line2">{{filmData.nation}} | {{filmData.runtime}}分钟</p>
       <van-collapse v-model="activeNames">
            <van-collapse-item name="1">
                 <div slot="title">电影简介<van-icon name="question-o" /></div>
              <div class="movieContent">
                {{filmData.synopsis}}             
              </div>
              </van-collapse-item>
       </van-collapse>
       </div>
       <div class="blankLine">
       </div>
       <div class="actorTitle">
        演职人员
       </div>
       <div class="actorBanner">
           <act-banner :actorData="filmData.actors" v-if="filmData && filmData.actors"></act-banner>
       </div>
       <div class="line">

       </div>
       <ul class="photos">
       <li>
        剧照
       </li>
        <li>
        全部（{{filmData.photos.length}}）>
       </li>

       </ul>
       <div class="photoBanner">
           <photo-banner :photoData="filmData.photos" v-if="filmData && filmData.photos"></photo-banner>
       </div>
       </div>
       <div class="foot">
        <router-link :to="this.$route.path+'/cinemas'">选座购票</router-link>
       </div>
   </div>
</template>

<script>
import {getMovDetail} from '@/api/movie.js'
import ActBanner from './components/actorBanner'
import PhotoBanner from './components/photoBanner'

export default {
    data(){
        return{
         filmData:'',
         activeNames: ['1'],
         border:false,
         is:false
        }
    },
    methods:{
        getMovDtl(){
            getMovDetail({filmId:this.$route.params.id}).then(res=>{
                this.filmData=res.data.film
            })
        },
        scrollhead(e){
            this.is=e.isFixed

        }
    },
    watch:{
        $route:{
            handler(val){
                this.getMovDtl()
            },
            immediate:true
        }
    },
    created(){
        this.$emit('changeis')
    },
    components:{
         ActBanner,
         PhotoBanner
    }
}
</script>

<style lang="scss" scoped>
.fixHeader{
    position: absolute;
    height:0.88rem;
    width:100%;
    line-height: 0.88rem;
    background-color: white;
    text-align: center;
    z-index:100;
    font-size: 0.34rem;

}
.logo{
 position: absolute;
 top:0.05rem;
 left:0.05rem;
 width: 0.6rem;
 height:0.6rem;
 border-radius:50%;
 background-color: white;
 opacity: 0.5;

}

.mainbody{
    display:flex;
    flex-direction: column;
    height:100%;
    .mainTop{
    flex:1;
    overflow: auto;
    }
    .poster{
    height:5rem;
    img{
        height:5rem;
        width:100%;
    }
}
.detail{
    padding:0.24rem 0.3rem;
    font-size:0.26rem;
    color:#797d82;
.line1{
   color: #191a1b;
    font-size: 0.36rem;
    height:0.48rem;
    line-height: 0.48rem;
    .left{
        margin-right:0.14rem;
        float: left;
    }
    .center{
        float: left;
        font-size:0.18rem;
        color: #fff;
        background-color: #d2d6dc;
        height: 0.28rem;
       line-height:0.28rem;
       margin-top:0.12rem;
    }
    .right{
        float: right;
        font-size: 0.25rem;
    font-style: italic;
    color: #ffb232;
    width:0.4rem
    }
    }
.line2{
    height:0.38rem;
    margin-top:0.08rem;
}
.movieContent{
    margin-top:0.24rem;

}

}

.blankLine{
    background-color:lightgrey;
    height:0.12rem;
}
.actorTitle{
    height:1.05rem;
    box-sizing:border-box;
    padding:0.3rem;
    font-size: 0.32rem;
    text-align: left;
    color: #191a1b;
}
.actorBanner{
    height:2.8rem;
    padding-left:0.3rem;
    padding-bottom:0.3rem;
    box-sizing:border-box;
}
}

.line{
    height:0.12rem;
    background-color: lightgrey;
}
.photos{
    height:1.24rem;
    box-sizing: border-box;
    padding:0.3rem;
    :nth-child(1){
        float: left;
    }
        :nth-child(2){
        float: right;
        font-size: 0.26rem;
    color: #797d82;
    }

}

.photoBanner{
    height:2.3rem;
    padding: 0 0 0.3rem 0.3rem;
}

.foot{
    height:0.98rem;
    background-color:#ff5f16;
          text-align: center;
                line-height:0.49rem;


    a{
      color: white;
      font-size:0.32rem;

    }
}

</style>